<template>
  <div class="sale">
    <div class="top">
      <div class="top-select">
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <!-- 搜索关键字 -->
      <el-input
        placeholder="请输入名称"
        icon="search"
        v-model="val"
        class="search-input"
      >
      </el-input>
      <el-button type="primary" @click="addFn(true)" plain size="small"
        >新增</el-button
      >
      <Dialog
        v-show="dialog_visible"
        @clickFn="addFn"
        :dialog_visible="dialog_visible"
      ></Dialog>
    </div>
    <main>
      <!-- 渲染表格数据 -->
      <el-table :data="tables" style="width: 100%" border stripe>
        <el-table-column
          type="index"
          label="序号"
          align="center"
        ></el-table-column>
        <el-table-column label="楼盘名称" align="center" prop="username">
          <template slot-scope="scope">
            <span
              style="margin-left: 10px"
              v-html="showDate(scope.row.title)"
              >{{ scope.row.title }}</span
            >
          </template></el-table-column
        >
        <el-table-column label="所属区域" align="center" prop="mobile"
          ><template slot-scope="scope">
            <span style="margin-left: 10px" v-html="showDate(scope.row.area)">
              {{ scope.row.area }}</span
            >
          </template></el-table-column
        >
        <el-table-column label="价格" align="center" prop="email"
          ><template slot-scope="scope">
            <span
              style="margin-left: 10px"
              v-html="showDate(scope.row.price)"
              >{{ scope.row.price }}</span
            >
          </template></el-table-column
        >
        <el-table-column label="更新时间" align="center" prop="role_name"
          ><template slot-scope="scope">
            <span style="margin-left: 10px" v-html="showDate(scope.row.time)">
              {{ scope.row.time }}</span
            >
          </template></el-table-column
        >
        <el-table-column label="排序" align="center" prop="role_name"
          ><template slot-scope="scope">
            <span
              style="margin-left: 10px"
              v-html="showDate(scope.row.sorts)"
              >{{ scope.row.sorts }}</span
            >
          </template></el-table-column
        >
        <el-table-column label="状态">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.state"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="300">
          <template slot-scope="scope">
            <span>户型</span> | <span>相册</span> | <span>动态</span> |
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              type="danger"
              icon="el-icon-delete"
              @click="handleDel(scope.$index, scope.row)"
              size="mini"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 编辑弹窗 -->
      <el-dialog title="编辑" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="楼盘名称" :label-width="formLabelWidth">
            <el-input v-model="form.title" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="所属区域" :label-width="formLabelWidth">
            <el-input v-model="form.area" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="价格" :label-width="formLabelWidth">
            <el-input v-model="form.price" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="更新时间" :label-width="formLabelWidth">
            <el-input v-model="form.time" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="排序" :label-width="formLabelWidth">
            <el-input v-model="form.sorts" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          @current-change="PageChange"
          :current-page="pageIndex"
          :page-size="pageSize"
          layout="total, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </main>
  </div>
</template>

<script>
import Dialog from "../components/Dialog.vue";
export default {
  components: {
    Dialog,
  },
  data() {
    return {
      list: [], /// 表格数据
      dialogFormVisible: false,
      pageIndex: 1,
      pageSize: 5,
      ind: 0,
      bool: false,
      keyword: "",
      form: {
        title: "",
        area: "",
        price: "",
        time: "",
        sorts: "",
      },
      val: "",
      total: 0, ///总页数
      dialog_visible: false,
      formLabelWidth: "120px",
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      value: "",
    };
  },
  created() {
    /// 连接数据接口
    this.$api.getList().then((res) => {
      console.log(res, "table");
      this.list = res.data.data.data;
      /// 首次默认加载
      this.PageChange();
      /// 分页总条数
      this.total = res.data.data.total;
    });
  },
  computed: {
    /// 实时监听表格数据
    tables: function () {
      const val = this.val;
      if (val) {
        return this.list.filter((dataNews) => {
          return Object.keys(dataNews).some((key) => {
            return String(dataNews[key]).toLowerCase().indexOf(val) > -1;
          });
        });
      }
      return this.list;
    },
  },
  methods: {
    /// 筛选变色
    showDate(value) {
      value = value + "";
      if (value.indexOf(this.val) !== -1 && this.val !== "") {
        return value.replace(
          this.val,
          '<font color="#f00">' + this.val + "</font>"
        );
      } else {
        return value;
      }
    },
    /// 确定编辑数据
    submit() {
      this.dialogFormVisible = false;
      this.$api
        .editList({
          id: this.form.id,
          title: this.form.title,
          area: this.form.area,
          price: this.form.price,
          time: this.form.time,
          sorts: this.form.sorts,
        })
        .then((res) => {
          console.log(res, "edit");
          this.$message.success(res.data.message);
          this.$api.getList().then((res) => {
            this.list = res.data.data.data;
          });
        });
    },
    /// 编辑回显数据
    handleEdit(index, row) {
      console.log(index, row);
      this.dialogFormVisible = true;
      this.form.id = row.id;
      this.form.title = row.title;
      this.form.area = row.area;
      this.form.price = row.price;
      this.form.time = row.time;
      this.form.sorts = row.sorts;
    },
    /// 删除数据
    handleDel(index, row) {
      console.log(index, row);
      this.$api.delList(row.id).then((res) => {
        console.log(res, "delete");
        this.$message.success(res.data.message);
        this.$api.getList().then((res) => {
          this.list = res.data.data.data;
        });
        this.PageChange();
      });
    },
    /// 分页
    PageChange(e = 1, ind = this.ind) {
      this.pageIndex = e;
      this.bool = true;
      this.$api
        .getList({
          pageIndex: this.pageIndex,
          pageSize: this.pageSize,
          keyword: this.keyword,
        })
        .then((res) => {
          if (this.ind !== ind) return;
          if (res.data.code === 1) {
            this.list = res.data.data.data;
          }
          this.bool = false;
        });
    },
    /// 显示弹窗
    addFn(visible) {
      this.dialog_visible = visible;
    },
  },
};
</script>

<style lang='scss' scoped>
.sale {
  width: 100%;
  height: 100%;
  .top {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    justify-content: space-around;
    border-bottom: 1px solid #eee;
    .top-select {
      flex: 1;
      display: flex;
      height: 35px;
      .el-select {
        width: 20%;
        height: 100%;
        margin: 0 10px;
      }
    }
    .el-button {
      width: 65px;
      margin-left: 15px;
    }
  }
}
.search-input {
  width: 150px;
}
</style>